<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${webPath }/lib/css/global.css" media="all" />
<link rel="stylesheet" href="${webPath }/lib/layuicms/layui/css/layui.css" media="all" />
 <%@include file="/WEB-INF/common/script.jsp"%><!--静态包含-->
 <script type="text/javascript">
 var classflyId = '${modle.id }'.trim();
 var userId = '${user.id}';
 </script>
<title>Insert title here</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>专项练习-${modle.name }</legend>
 </fieldset>
<ul class="layui-timeline">
	</ul>
  <div align="center" id="laypageDiv"></div>
  <script type="text/javascript" src="${webPath }/lib/layuicms/layui/layui.js"></script>
  <script type="text/javascript">
  layui.use(['layer', 'laypage','jquery','form','element','laytpl'], function() {
	  var $ = layui.jquery
	  ,layer = layui.layer
	  ,form = layui.form
	  ,laytpl = layui.laytpl
	  ,laypage = layui.laypage
	  ,element = layui.element;
	  
	  
	  
	  function laypageAjax(page,limit,classflyId){
		   $.ajax({
				url : webPath + '/subjectController/ajaxList',
				data:{page:page,limit:limit,classflyId:classflyId},
				type : 'post', 
				dataType : 'json',
				success : function(json) {
					if(json.code === 0){
						var data = json.data;
						var html = laytpl(tpldemo.value).render(data);
						$('ul[class="layui-timeline"]').html(html);
						form.render('checkbox');
						form.render('radio');
						    laypage.render({
							     elem: 'laypageDiv'
							     ,count: json.count
							     ,curr:page
							     ,limit:limit
							     ,layout: ['count', 'prev', 'page', 'next', 'skip']
							     ,jump: function(obj, first){
							    	 if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
							    		 laypageAjax(obj.curr,obj.limit,classflyId);
							    	     //回到顶部
							    		  $("html,body").animate({scrollTop:0}, 500);
						                };
							     }
							   }); 
					}
				},
				error : function() {
					layer.msg('系统出错,请联系管理员');
				}
			});
	  };
	  
	  //获取错误次数
	  function errSubjectCount(userId,id,reslut){
		  $.ajax({
				url : webPath + 'errorErrorSubjectController/queryById',
				data:{subjectId:id,userId:userId},
				type : 'post', 
				dataType : 'json',
				success : function(json) {
					if(json.code === 200){
						var html =  '<div id = "'+id+'" class="layui-collapse">'+
									'<div class="layui-collapse">'+
									'<div class="layui-colla-item">'+
									'<h4 class="layui-colla-title"><b>正确答案'+reslut+',再接再厉哦！此题你已错误'+json.data.errorCount+'次</b></h4>'+
									'<div class="layui-colla-content layui-show ">'+
									'<form class="layui-form">'+
									'<textarea name="content" placeholder="请输入错误日志" class="layui-textarea"></textarea><br/>'+
									'<a   href="javascript:;"   class="layui-btn"  lay-submit lay-filter="errorSubject">保存</a>'+
									'<input name="id" type="hidden" value="'+json.data.id+'"/></form>'+
									'</div>'+
									'</div></div>';
						$('form[id = "'+id+'"]').after(html);
						element.render('collapse'); 
					}
				},
				error : function() {
					layer.msg('系统出错,请联系管理员');
				}
			}).done(function(json){
				if(json.code === 200){
				}
		   });
	  }
	  
	  form.on('submit(errorSubject)', function(data){
		  var that = $(this);
		  var aTips = that.parents().find('h4[class = "layui-colla-title"]').find('b');
		   $.ajax({
				url : webPath + 'errorErrorSubjectController/saveUpdate',
				data:data.field,
				type : 'post', 
				dataType : 'json',
				success : function(json) {
					if(json.code === 200){
						layer.tips('错误日已保存，请到错题集里面查看', aTips);
						var classText = that.parent().parent().attr('class').split(' ')
					    that.parent().parent().attr('class',classText[0])
					}
				},
				error : function() {
					layer.msg('系统出错,请联系管理员');
				}
			});
	  });
	  
	  form.on('submit(btn)', function(data){
		  var thisReslut = '', arr=[],id = data.elem.id;
		  layui.each(data.field,function(index,item){arr.push(item);});
		  thisReslut=arr.join('');
		   $.ajax({
				url : webPath + 'subjectController/queryReslutByParam',
				data:{id:id},
				type : 'post', 
				dataType : 'json',
				success : function(json) {
					if(json.code === 200){
						var res = json.data;
						$('div[id = "'+id+'"]').remove();
						if(res.id == id && res.reslut == thisReslut ){
							$('form[id = "'+id+'"]').after('<div class="layui-anim layui-anim-scale" id = "'+id+'"><br/><b>恭喜你回答正确！</b><hr class="layui-bg-green"><div>');
						}else{
							var reslut = res.reslut;
							 errSubjectCount(userId,id,reslut);
						}
					}
				},
				error : function() {
					layer.msg('系统出错,请联系管理员');
				}
			});
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	  
	  classflyId != ''? laypageAjax(1,24,classflyId):layer.msg('加载失败，请刷新！')  ;
  });</script>
</body>
<textarea class="site-demo-text" id="tpldemo"  style="display:none;">
 {{# layui.each(d, function(index, item){ }}
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">{{ item.id }}.{{=item.content }}</h3>
      <form class="layui-form"  id="{{item.id }}" >
          <table class="layui-table"  lay-skin="line">
          <!-- 模板解析单选/多选 -->
          {{#  item.fn  = item.reslut == 1?'radio' :'checkbox'; }}
          <tbody>
          <tr>
           {{#  item.name = item.fn === 'radio'? item.id:item.id+'[0]'; }}
          <th><input type="{{ item.fn }}" name="{{item.name}}" value="A" title="A." lay-skin="primary">{{=item.optionA }}</input></th>
          </tr> 
          <tr>
           {{#  item.name = item.fn === 'radio'? item.id:item.id+'[1]';  }}
          <th><input type="{{ item.fn }}" name="{{item.name}}" value="B" title="B."  lay-skin="primary">{{=item.optionB }}</input></th>
          </tr> 
          <tr>
           {{#  item.name = item.fn === 'radio'? item.id:item.id+'[2]';  }}
          <th><input type="{{ item.fn }}" name="{{item.name}}" value="C" title="C."  lay-skin="primary">{{=item.optionC }}</input></th>
          </tr> 
          <tr>
           {{#  item.name = item.fn === 'radio'? item.id:item.id+'[3]';  }}
          <th><input type="{{ item.fn }}" name="{{item.name}}" value="D" title="D." lay-skin="primary">{{=item.optionD }}</input></th>
          </tr> </tbody>
          </table>
          <button id="{{ item.id}}" class="layui-btn layui-btn-normal" lay-submit lay-filter="btn">提交答案</button>
          </form>
    </div>
  </li>
  {{#  }); }}
 </textarea>
</html>